<template>
    <div class="list_box">
    <ul class="list_ul">
      <li @click="toPage(item.classify , item.title)" class="list_list" v-for="(item, index) in get_classList" :key="index">
        <p class="title">{{ item.title }}</p>
        <p class="classify">
          <span>分类</span>
          <b>{{ item.classify }}</b>
        </p>
        <p class="date">
          <span>时间</span>
          <b>{{ item.time }}</b>
        </p>
        <p class="count">
          <span>次数</span>
          <b>{{ item.count }}</b>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {
    name : 'ClassList',
    created : function(){
        var classify = this.$route.fullPath;
        this.get_classListAction(classify)
    },
    methods : {
        ...mapActions(['get_classListAction']),
        toPage : function(classify,title){
          this.$router.push(`/page/${classify}/${title}`)
      }
    },
    computed : {
        ...mapGetters(['get_classList'])
    }
}
//1.获取分类
//2.服务器获取分类下边所有的文件
//3.把所有的文件渲染到页面中
</script>

<style>
.list_box {
}
.list_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_list {
  list-style: none;
  border: 1px solid #e3e3e3;
  flex-grow: 1;
  margin: 0.5em;
  padding: 0.3em;
  cursor: pointer;
}
.list_list .title {
  font-size: 1.5em;
}
.list_list .count {
  font-size: 0.5em;
}
.list_list .classify {
  font-size: 0.5em;
}
.list_list .date {
  font-size: 0.5em;
}
.list_list p {
  margin: 0.1em 0;
}
.list_list p b {
  padding: 0px 0.5em;
  background-color: #eee;
}
</style>